import React, { useState } from 'react';
import { Switch } from '@headlessui/react';

interface Settings {
  autoSync: boolean;
  privateByDefault: boolean;
  darkMode: boolean;
  notificationsEnabled: boolean;
}

interface SettingsPanelProps {
  className?: string;
}

const SettingsPanel: React.FC<SettingsPanelProps> = ({ className = '' }) => {
  const [settings, setSettings] = useState<Settings>({
    autoSync: true,
    privateByDefault: false,
    darkMode: false,
    notificationsEnabled: true,
  });

  const updateSetting = (key: keyof Settings, value: boolean) => {
    setSettings((prev) => ({
      ...prev,
      [key]: value,
    }));

    // Save settings to chrome.storage.sync
    chrome.storage.sync.set({ settings: { ...settings, [key]: value } });
  };

  const SettingItem: React.FC<{
    title: string;
    description: string;
    value: boolean;
    onChange: (value: boolean) => void;
  }> = ({ title, description, value, onChange }) => (
    <div className="flex items-center justify-between py-4">
      <div className="flex-1 pr-4">
        <h3 className="text-sm font-medium text-gray-900">{title}</h3>
        <p className="text-sm text-gray-500">{description}</p>
      </div>
      <Switch
        checked={value}
        onChange={onChange}
        className={`${
          value ? 'bg-primary-500' : 'bg-gray-200'
        } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2`}
      >
        <span
          className={`${
            value ? 'translate-x-6' : 'translate-x-1'
          } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
        />
      </Switch>
    </div>
  );

  return (
    <div className={`space-y-6 ${className}`}>
      <div className="card">
        <h2 className="text-lg font-semibold mb-4">Settings</h2>
        
        <div className="divide-y">
          <SettingItem
            title="Auto Sync"
            description="Automatically sync bookmarks across devices"
            value={settings.autoSync}
            onChange={(value) => updateSetting('autoSync', value)}
          />
          
          <SettingItem
            title="Private by Default"
            description="Make new collections private by default"
            value={settings.privateByDefault}
            onChange={(value) => updateSetting('privateByDefault', value)}
          />
          
          <SettingItem
            title="Dark Mode"
            description="Enable dark mode for the extension"
            value={settings.darkMode}
            onChange={(value) => updateSetting('darkMode', value)}
          />
          
          <SettingItem
            title="Notifications"
            description="Enable browser notifications"
            value={settings.notificationsEnabled}
            onChange={(value) => updateSetting('notificationsEnabled', value)}
          />
        </div>
      </div>

      <div className="card">
        <h2 className="text-lg font-semibold mb-4">About</h2>
        <div className="text-sm text-gray-600">
          <p className="mb-2">BookMark Navigator v1.0.0</p>
          <p>A powerful bookmark manager that helps you organize and share your bookmarks.</p>
        </div>
      </div>

      <div className="card">
        <h2 className="text-lg font-semibold mb-4">Storage</h2>
        <div className="space-y-2">
          <button
            onClick={() => chrome.storage.local.clear()}
            className="btn btn-secondary w-full"
          >
            Clear Local Storage
          </button>
          <button
            onClick={() => {
              const confirmed = window.confirm(
                'Are you sure you want to reset all settings to default?'
              );
              if (confirmed) {
                setSettings({
                  autoSync: true,
                  privateByDefault: false,
                  darkMode: false,
                  notificationsEnabled: true,
                });
                chrome.storage.sync.clear();
              }
            }}
            className="btn btn-secondary w-full"
          >
            Reset Settings
          </button>
        </div>
      </div>
    </div>
  );
};

export default SettingsPanel;
